<template>
	<view class="MainBox">
		<view class="nav-bar">
			<view class="back-btn" @click="goBack">←</view>
			<view class="page-title">资料编辑</view>
		</view>
		<view class="contentList">
			<view class="avatar-box" @click="changeAvatar">
				<view class="avatar">
					<image class="avatarImage" v-if="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill"></image>
				</view>
				<view class="avatar-text">点击更换头像</view>
			</view>
			<view class="list_item">
				<view>
					<view class="text">姓名</view>
					<input class="input" v-model="userInfo.name" placeholder="请输入姓名" maxlength="20"/>
				</view>
				<view class="list_item">
					<view class="text">手机号</view>
					<input class="input" v-model="userInfo.phone" placeholder="请输入手机号" type="number" maxlength="11"/>
				</view>
				<view class="list_item">
					<view class="text">修改密码</view>
					<button class="input" @click="resetPassword"></button>
				</view>
				<view class="list_item">
					<view class="text">性别</view>
					<picker @change="onGenderChange" :value="genderIndex" :range="genderList" class="picker">
						<view class="picker-text">{{ userInfo.gender || '请选择性别' }}</view>
					</picker>
				</view>
				<view class="list_item">
					<view class="text">年龄</view>
					<input class="input" v-model="userInfo.age" placeholder="请输入年龄" type="number" maxlength="4"/>
				</view>
				<view class="list_item">
					<view class="text">职业</view>
					<input class="input" v-model="userInfo.job" placeholder="请输入职业" maxlength="20"/>
				</view>
			</view>
		</view>
	</view>
	<view class="edit">
		<button class="edit-btn save-btn" @click="yesEdit">保存</button>
		<button class="edit-btn cancel-btn" @click="noEdit">取消</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					name: '杨**',
					phone: '13400001111',
					gender: '女',
					age: '20',
					job: '社区工作者',
					avatar: ''
				},
				genderList: ['男', '女'],
				genderIndex: 0
			}
		},
		methods: {
			goBack() {
				uni.navigateTo({
					url:"/pages/volunteerInterface/me"
				})
			},
			resetPassword(){
				uni.navigateTo({
					url:"/pages/volunteerInterface/megoto/resetPassword"
				})
			},
			onGenderChange(e) {
				this.genderIndex = e.detail.value;
				this.userInfo.gender = this.genderList[this.genderIndex];
			},
			changeAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.userInfo.avatar = res.tempFilePaths[0];
						uni.showToast({
							title: '头像选择成功',
							icon: 'success'
						});
					}
				});
			},
			yesEdit() {
				// 表单验证
				if (!this.validateForm()) {
					return;
				}
				uni.showLoading({
					title: '保存中...'
				});
				uni.navigateBack();
			},
			noEdit() {
				uni.showModal({
					title: '提示',
					content: '确定放弃修改吗？',
					success: (res) => {
						if (res.confirm) {
							uni.navigateBack();
						}
					}
				});
			},
			validateForm() {
				if (!this.userInfo.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.userInfo.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return false;
				}
				
				if (!/^1[3-9]\d{9}$/.test(this.userInfo.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					});
					return false;
				}
				
				if (this.userInfo.age && (this.userInfo.age < 1 || this.userInfo.age > 150)) {
					uni.showToast({
						title: '年龄范围1-150',
						icon: 'none'
					});
					return false;
				}
				
				return true;
			}
		}
	};
</script>

<style>
	.MainBox {
		background: linear-gradient(135deg, #FFF8F2 0%, #FFF0E6 100%);
		min-height: 100vh;
		padding-bottom:  80rpx;
	}
	
	.nav-bar {
		height: 90px;
		background-color: #fff8f0;
		display: flex;
		align-items: center;
		padding: 0 15px;
		border-bottom: 1px solid #ffd5b8;
	}
	
	.back-btn {
		font-size: 20px;
		color: #ff7d00;
	}
	
	.page-title {
		font-size: 18px;
		font-weight: 600;
		color: #ff7d00;
		margin-left: 10px;
	}
	
	
	
	.contentList {
	    padding: 30rpx;
		
	}
	
	.avatar-box {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    margin-bottom: 50rpx;
	    padding: 40rpx 0;
	}
	
	.avatar {
	    width: 120rpx;
	    height: 120rpx;
	    border-radius: 50%;
	    background: linear-gradient(135deg, #FFE4CC 0%, #FFD5B8 100%);
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    margin-bottom: 20rpx;
	    overflow: hidden;
	}
	.avatarImage{
	    width: 100%;
	    height: 100%;
	}
	.avatar-text {
	    font-size: 24rpx;
	    color: #ff7d00;
	}
	
	.list_item {
	    display: flex;
	    flex-direction: column;
	    align-items: flex-start;
	    padding: 30rpx;
	    border-bottom: 1px solid #ffedd8;
	    background: #ffffff;
	    border-radius: 12rpx;
	    /* margin-bottom: 20rpx; */
	    box-shadow: 0 2rpx 12rpx rgba(255, 125, 0, 0.08);
	}
	
	.text {
	    font-size: 28rpx;
	    color: #333;
	    font-weight: 500;
	    margin-bottom: 20rpx;
	    min-width: auto;
	}
	
	.input {
	    width: 100%;
	    font-size: 28rpx;
	    color: #666;
	    padding: 20rpx 0;
	    text-align: left;
	}
	
	.picker {
	    width: 100%;
	    text-align: left;
	}
	
	.picker-text {
	    font-size: 28rpx;
	    color: #666;
	    padding: 20rpx 0;
	    width: 100%;
	}
	
	.edit {
	    position: fixed;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    background: #fff;
	    padding: 30rpx;
	    display: flex;
	    gap: 20rpx;
	    box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.edit-btn {
	    flex: 1;
	    height: 80rpx;
	    border-radius: 40rpx;
	    font-size: 32rpx;
	    font-weight: 500;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    border: none;
	}
	
	.save-btn {
	    background: linear-gradient(135deg, #FF7D00 0%, #FF9D42 100%);
	    color: #ffffff;
	}
	
	.cancel-btn {
	    background: #f8f8f8;
	    color: #666;
	    border: 2rpx solid #eee;
	}
</style>